<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    //就是http://127.0.0.1:8080/pic/
    String basePath = "http://106.53.67.228/";
%>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小说网</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/novelSearch.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/iconfont.css">

    <style>
        .icon {

            width: 1em; height: 1em;

            vertical-align: -0.15em;

            fill: currentColor;

            overflow: hidden;

        }
    </style>
<body>
<div id="topOne">
    <div class="nav-link">
        <a class="act" href="${pageContext.request.contextPath}/index" >畅读中文网</a><%--<em>|</em>--%>
        <div class="user" >
            <font class="iconfont">
                <c:choose>
                    <c:when test="${user ne null }">
                        欢迎 ${user.username }
                        <c:if test="${userVip eq 0}">&#xe72f;</c:if>
                        <c:if test="${userVip eq 1}"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huiyuanjulebu1"></use>
                        </svg></c:if>
                    </c:when>
                    <c:otherwise><a href="${pageContext.request.contextPath}/loginAndRegist.jsp">登录</a></c:otherwise>
                </c:choose>
            </font>
            |
            <font class="iconfont">
                <c:choose>
                    <c:when test="${user ne null }"><a href="<c:url value="/user/logout"/>">退出</a></c:when>
                    <c:otherwise><a href="${pageContext.request.contextPath}/loginAndRegist.jsp">注册</a></c:otherwise>
                </c:choose>
            </font>
        </div>
    </div>
</div>
<div id="Top">
    <div class="logo">
        <a href="${pageContext.request.contextPath}/index">
            <img src="${pageContext.request.contextPath}/static/images/logoA.png" width="100px" height="50px" />
        </a>
    </div>
    <div class="search">
        <form id="search" action="<c:url value="/novel/findNovel" />" method="post">
            <div id="searchTxt" class="searchTxt">

                <div class="searchMenu">

                    <%--<div class="searchSelected" id="searchSelected">玄幻</div>
                    <div style="display:none;" class="searchTab" id="searchTab">--%>
                    <ul>
                        <select  id="sel" name="novel.typeId" style="height:39px;border:0;padding:2px;margin:0;">
                            <option value="">--请选择--</option>
                            <c:forEach items="${noveltypeList }" var="noveltype">
                                <option  style="background-color:transparent;"  value="${noveltype.id }">
                                        ${noveltype.typename }
                                </option>
                            </c:forEach>
                        </select>

                    </ul>

                </div>
                <input name="novel.novelname" type="text" />
                <div class="searchBtn">
                    <button id="searchBtn"></button>
                </div>
            </div>


    </div>

    </form>
</div>
</div>

<div id="Logo">
    <ul>
        <li class="first">
						<span class="iconfont">
							<div>
							<i></i>
							<i></i>
							<i></i>
							</div>
							作品分类
						</span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/novel/findNovel" title="首页">全部作品</a>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/novel/findNovel?novel.isFree=1">VIP</a>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/novel/findNovel?novel.isFree=0">免费</a>
        </li>
        <li class="last"></li>
    </ul>
</div>

<div id="main" >
    <div class="content">
        <div class="menu" >
            <div class="category first">
                <h3>分类</h3>
                <ul>
                    <li >
                        <a href="${pageContext.request.contextPath}/novel/findNovel">全部</a>
                    </li>
                    <c:forEach items="${noveltypeList }" var="noveltype">
                        <li>
                            <a href="${pageContext.request.contextPath}/novel/findNovel?novel.typeId=${noveltype.id}">${noveltype.typename}</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <div class="category second">
                <h3>属性</h3>
                <ul>
                    <li >
                        <a href="${pageContext.request.contextPath}/novel/findNovel">全部</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/novel/findNovel?novel.isFree=0">免费</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/novel/findNovel?novel.isFree=1">VIP</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="display">
            <section class="books">
                <ul>
                    <c:forEach items="${pageBean.beanList}" var="novel">
                        <li class="box">
                            <img src="<%=basePath%>${novel.pic}" width="190px" height="220px">

                            <div>
                                <a href="${pageContext.request.contextPath}/novel/novelSearch?id=${novel.id}"><h2>${novel.novelname}</h2></a>
                            </div>

                        </li>
                    </c:forEach>
                </ul>

            </section>
            <jsp:include page="pager.jsp"></jsp:include>
            <%--<iframe width="100%" height="100%" src="${pageContext.request.contextPath}/novel/novelSearch" ></iframe>--%>
        </div>
    </div>
</div>

<div class="Footer">
    <div class="footer_nav">
        <a>关于畅读小说网</a>&#12288;|&#12288;
        <a>商务合作</a>&#12288;|&#12288;
        <a>友情链接</a>&#12288;|&#12288;
        <a>帮助中心</a>&#12288;|&#12288;
        <a>用户守则</a>&#12288;|&#12288;
        <a>网站地图</a>&#12288;|&#12288;
        <a>诚聘精英</a>&#12288;|&#12288;
        <a>畅读</a>
    </div>
    <p>
        <a>Copyright (C) 2018-2019 www.changdu.com All Rights Reserved </a>
        <br />--畅读权利声明。
    </p>
</div>
</body>
<!--引用外部jquery文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/novelSearch.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/iconfont.js"></script>
<script type="text/javascript">
    //选择颜色的跳动
    $(".first ul li").click(function () {
        $(this).addClass("all");
      /*  $(this).siblings().removeClass("all");*/
    });

</script>
</html>